import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// 模拟常见问题数据
const FAQ_ITEMS = [
  {
    id: '1',
    question: '如何修改个人资料？',
    answer: '您可以在"个人信息"页面点击右上角的编辑按钮，或在"设置"中的"编辑个人资料"选项进行修改。',
    category: 'account'
  },
  {
    id: '2',
    question: '如何参加活动？',
    answer: '您可以在"发现"页面浏览可参加的活动，点击感兴趣的活动查看详情，然后点击"报名参加"按钮即可。',
    category: 'activity'
  },
  {
    id: '3',
    question: '如何添加好友？',
    answer: '您可以在"匹配"页面查看推荐的好友，点击"添加好友"按钮发送好友请求。对方接受后，您就成为好友了。',
    category: 'social'
  },
  {
    id: '4',
    question: '如何收藏感兴趣的内容？',
    answer: '在浏览活动或文章时，点击右上角的心形图标即可将内容添加到收藏夹。您可以在"我的收藏"中查看所有收藏的内容。',
    category: 'usage'
  },
  {
    id: '5',
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"，按照提示输入您的注册邮箱，我们会向您发送重置密码的链接。',
    category: 'account'
  },
  {
    id: '6',
    question: '如何调整应用的字体大小？',
    answer: '在"设置"页面的"显示设置"部分，您可以选择"字体大小"并调整为小、中、大三种尺寸。',
    category: 'settings'
  },
];

// 联系方式
const CONTACT_INFO = {
  phone: '400-123-4567',
  email: 'support@beforesunset.com',
  wechat: 'BeforeSunset_Support',
  serviceTime: '周一至周五 9:00-18:00'
};

export default function HelpScreen() {
  const colorScheme = useColorScheme();
  const tintColor = Colors[colorScheme ?? 'light'].tint;
  const router = useRouter();
  
  // 状态管理展开的FAQ项
  const [expandedId, setExpandedId] = useState(null);
  
  // 筛选类别
  const [selectedCategory, setSelectedCategory] = useState('all');
  
  // 筛选后的FAQ项
  const filteredFAQs = selectedCategory === 'all' 
    ? FAQ_ITEMS 
    : FAQ_ITEMS.filter(item => item.category === selectedCategory);
  
  // 渲染FAQ项
  const renderFAQItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.faqItem}
      onPress={() => setExpandedId(expandedId === item.id ? null : item.id)}
    >
      <View style={styles.faqHeader}>
        <ThemedText style={styles.faqQuestion}>{item.question}</ThemedText>
        <MaterialCommunityIcons 
          name={expandedId === item.id ? 'chevron-up' : 'chevron-down'} 
          size={24} 
          color={tintColor} 
        />
      </View>
      
      {expandedId === item.id && (
        <View style={styles.faqAnswer}>
          <ThemedText style={styles.faqAnswerText}>{item.answer}</ThemedText>
        </View>
      )}
    </TouchableOpacity>
  );
  
  // 渲染类别筛选按钮
  const renderCategoryButton = (category, label) => (
    <TouchableOpacity 
      style={[
        styles.categoryButton,
        selectedCategory === category && styles.activeCategoryButton
      ]}
      onPress={() => setSelectedCategory(category)}
    >
      <ThemedText 
        style={[
          styles.categoryButtonText,
          selectedCategory === category && styles.activeCategoryButtonText
        ]}
      >
        {label}
      </ThemedText>
    </TouchableOpacity>
  );

  return (
    <ThemedView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <MaterialCommunityIcons name="arrow-left" size={28} color={tintColor} />
        </TouchableOpacity>
        <ThemedText style={styles.headerTitle}>帮助中心</ThemedText>
        <View style={styles.placeholder} />
      </View>
      
      <ScrollView style={styles.scrollView}>
        <View style={styles.categoriesContainer}>
          {renderCategoryButton('all', '全部')}
          {renderCategoryButton('account', '账户')}
          {renderCategoryButton('activity', '活动')}
          {renderCategoryButton('social', '社交')}
          {renderCategoryButton('usage', '使用')}
          {renderCategoryButton('settings', '设置')}
        </View>
        
        <View style={styles.faqSection}>
          <ThemedText style={styles.sectionTitle}>常见问题</ThemedText>
          <FlatList
            data={filteredFAQs}
            renderItem={renderFAQItem}
            keyExtractor={item => item.id}
            scrollEnabled={false}
          />
        </View>
        
        <View style={styles.contactSection}>
          <ThemedText style={styles.sectionTitle}>联系我们</ThemedText>
          
          <View style={styles.contactItem}>
            <MaterialCommunityIcons name="phone" size={24} color={tintColor} style={styles.contactIcon} />
            <View>
              <ThemedText style={styles.contactLabel}>客服电话</ThemedText>
              <ThemedText style={styles.contactValue}>{CONTACT_INFO.phone}</ThemedText>
            </View>
          </View>
          
          <View style={styles.contactItem}>
            <MaterialCommunityIcons name="email" size={24} color={tintColor} style={styles.contactIcon} />
            <View>
              <ThemedText style={styles.contactLabel}>电子邮箱</ThemedText>
              <ThemedText style={styles.contactValue}>{CONTACT_INFO.email}</ThemedText>
            </View>
          </View>
          
          <View style={styles.contactItem}>
            <MaterialCommunityIcons name="wechat" size={24} color={tintColor} style={styles.contactIcon} />
            <View>
              <ThemedText style={styles.contactLabel}>微信公众号</ThemedText>
              <ThemedText style={styles.contactValue}>{CONTACT_INFO.wechat}</ThemedText>
            </View>
          </View>
          
          <View style={styles.contactItem}>
            <MaterialCommunityIcons name="clock-outline" size={24} color={tintColor} style={styles.contactIcon} />
            <View>
              <ThemedText style={styles.contactLabel}>服务时间</ThemedText>
              <ThemedText style={styles.contactValue}>{CONTACT_INFO.serviceTime}</ThemedText>
            </View>
          </View>
        </View>
        
        <TouchableOpacity style={styles.feedbackButton}>
          <MaterialCommunityIcons name="message-text-outline" size={20} color="#fff" style={styles.feedbackIcon} />
          <ThemedText style={styles.feedbackButtonText}>提交反馈</ThemedText>
        </TouchableOpacity>
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 60,
    paddingBottom: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: 'bold',
  },
  placeholder: {
    width: 40,
  },
  scrollView: {
    flex: 1,
  },
  categoriesContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  categoryButton: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 20,
    marginRight: 8,
    marginBottom: 8,
    backgroundColor: '#F5F5F5',
  },
  activeCategoryButton: {
    backgroundColor: '#0a7ea4',
  },
  categoryButtonText: {
    fontSize: 14,
    color: '#666',
  },
  activeCategoryButtonText: {
    color: '#fff',
    fontWeight: '500',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  faqSection: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  faqItem: {
    backgroundColor: '#f9f9f9',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  faqHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  faqQuestion: {
    fontSize: 16,
    fontWeight: '500',
    flex: 1,
    marginRight: 10,
  },
  faqAnswer: {
    marginTop: 10,
    paddingTop: 10,
    borderTopWidth: 1,
    borderTopColor: '#E1E1E1',
  },
  faqAnswerText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#666',
  },
  contactSection: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  contactItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  contactIcon: {
    marginRight: 15,
  },
  contactLabel: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  contactValue: {
    fontSize: 16,
    fontWeight: '500',
  },
  feedbackButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0a7ea4',
    marginVertical: 20,
    marginHorizontal: 20,
    paddingVertical: 15,
    borderRadius: 10,
  },
  feedbackIcon: {
    marginRight: 10,
  },
  feedbackButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});